<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <title>Document</title>
    <!-- 内部样式表 -->
     <style>
        /**/
div{
width:100px;
height:100px;
background-color:red;
}
span{
/* ctrl+/ width:100px; w100简写 */
width:100px;
height:100px;
background-color:blue;
}
     </style>
</head>
<body>
    <!-- 从功能上分类：1.块级元素2.行内元素 -->
    <!-- 1.块级元素
     特点：1.独占一行
     2.默认宽度是100%
     3.可以通过CSS属性设置宽高
     4.高度默认情况下由元素内容撑起
     div p h1
      -->
      <div>块级元素</div>
      <div>块级元素</div>
      <p>段落标签</p>
      <h1>一级标题</h1>
      <h1>二级标题</h1>
      <h1>三级标题</h1>
      <h1>四级标题</h1>
      <!-- ctrl+enter 可以快速跳到下一行 -->
      <h1>五级标题</h1>
      <h1>六级标题</h1>
      <section>块级元素</section>
      <!-- 2.行内元素：
       span*2{元素内容}
       特点：1.与其他元素共享一行空间
       2.高度默认情况下由元素内容撑起
       3.通过CSS设置的高度不显示

        -->
       <span>行内元素</span>
       <span>行内元素</span>
       <em>斜体标签</em>
       <i></i>
       <b></b>
       <strong></strong>
       
</body>
</html>